From 3d1c02e50ee619598bcd7fad4368be8b4a039e84 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 7 Mar 2022 18:19:21 +0100
Subject: refactor(web/ui): Fix compatibility with new API

This change updates the web interface in React to be compatible with the
new API written in Kotlin. Several changes have been made in the new API
to ensure consistency.
---
 .../projects/[project]/portfolios/[portfolio].js   | 25 ++++++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index d1533d98..68345d0b 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import React, { useRef } from 'react'
@@ -42,18 +43,24 @@ import PortfolioSelector from '../../../../components/context/PortfolioSelector'
 import ProjectSelector from '../../../../components/context/ProjectSelector'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
-import PortfolioResults from '../../../../components/portfolios/PortfolioResults'
+import { usePortfolio } from '../../../../data/project'
+
+const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'))
 
 /**
  * Page that displays the results in a portfolio.
  */
 function Portfolio() {
     const router = useRouter()
-    const { project: projectId, portfolio: portfolioId } = router.query
+    const projectId = +router.query['project']
+    const portfolioNumber = +router.query['portfolio']
 
     const overviewRef = useRef(null)
     const resultsRef = useRef(null)
 
+    const { data: portfolio } = usePortfolio(projectId, portfolioNumber)
+    const project = portfolio?.project
+
     const breadcrumb = (
         <Breadcrumb>
             <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
@@ -62,7 +69,11 @@ function Portfolio() {
             <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}>
                 Project details
             </BreadcrumbItem>
-            <BreadcrumbItem to={`/projects/${projectId}/portfolios/${portfolioId}`} component={BreadcrumbLink} isActive>
+            <BreadcrumbItem
+                to={`/projects/${projectId}/portfolios/${portfolioNumber}`}
+                component={BreadcrumbLink}
+                isActive
+            >
                 Portfolio
             </BreadcrumbItem>
         </Breadcrumb>
@@ -70,8 +81,8 @@ function Portfolio() {
 
     const contextSelectors = (
         <ContextSelectionSection>
-            <ProjectSelector projectId={projectId} />
-            <PortfolioSelector projectId={projectId} portfolioId={portfolioId} />
+            <ProjectSelector activeProject={project} />
+            <PortfolioSelector activePortfolio={portfolio} />
         </ContextSelectionSection>
     )
 
@@ -104,10 +115,10 @@ function Portfolio() {
             </PageSection>
             <PageSection isFilled>
                 <TabContent eventKey={0} id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <PortfolioOverview portfolioId={portfolioId} />
+                    <PortfolioOverview projectId={projectId} portfolioId={portfolioNumber} />
                 </TabContent>
                 <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden>
-                    <PortfolioResults portfolioId={portfolioId} />
+                    <PortfolioResults projectId={projectId} portfolioId={portfolioNumber} />
                 </TabContent>
             </PageSection>
         </AppPage>
-- 
cgit v1.2.3